<template>
  <a-modal
    :title="title"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskStyle="{'top':'93px','left':'154px'}"
    @cancel="handleCancel"
    :cancelText="$t('placeholder.cancel')"
    wrapClassName="ant-modal-cust-warp"
    style="top:20%;height: 55%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        {{ $t('button.cancel') }}
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.template')">
          <span><a :href="tmpUrl" target="_blank"><b>{{ $t('search.detailExcelTemplate') }}</b></a></span>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('search.file')">
          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"
                    :data="setFileData" :action="importExcelUrl" @change="handleImportExcel">
            <a-button type="primary" icon="import">{{ $t('button.import') }}</a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {ACCESS_TOKEN} from '@/store/mutation-types'
import Vue from 'vue'

export default {
  name: 'ImportItemModal',
  components: {},
  data() {
    return {
      title: '导入明细',
      visible: false,
      prefixNo: '',
      tmpUrl: '',
      model: {},
      tokenHeader: {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)},
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16}
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      url: {
        importExcelUrl: '/depotItem/importItemExcel'
      }
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
    }
  },
  methods: {
    add(prefixNo) {
      this.prefixNo = prefixNo
      let lang = Vue.ls.get('lang', 'zh_CN')
      if (prefixNo === 'QGD') {
        if (lang === 'zh_CN') {
          this.tmpUrl = '/doc/apply_item_template.xls'
        } else {
          this.tmpUrl = '/doc/apply_item_en_template.xls'
        }
      } else if (prefixNo === 'CGDD' || prefixNo === 'XSDD') {
        if (lang === 'zh_CN') {
          this.tmpUrl = '/doc/order_item_template.xls'
        } else {
          this.tmpUrl = '/doc/order_item_en_template.xls'
        }
      } else if (prefixNo === 'CGRK' || prefixNo === 'DB') {
        if (lang === 'zh_CN') {
          this.tmpUrl = '/doc/buy_sale_item_template.xls'
        } else {
          this.tmpUrl = '/doc/buy_sale_item_en_template.xls'
        }

      } else if (prefixNo === 'QTRK' || prefixNo === 'QTCK') {
        if (lang === 'zh_CN') {
          this.tmpUrl = '/doc/in_out_item_template.xls'
        } else {
          this.tmpUrl = '/doc/in_out_item_en_template.xls'
        }
      }
      this.form.resetFields()
      this.model = Object.assign({}, {})
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    //导入
    handleImportExcel(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        if (info.file.response) {
          if (info.file.response.code === 200) {
            this.$message.success(this.$t('message.importSuccess') + info.file.response.data.rows.length + this.$t('message.tiao'))
            this.$emit('ok', info.file.response.data.rows)
            this.close()
          } else if (info.file.response.code === 500) {
            this.$message.warn(info.file.response.data.message)
          }
        } else {
          this.$message.error(`${info.file.name} ${info.file.response.data}.`)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${this.$t('message.importFail')}: ${info.file.msg} `)
      }
    },
    setFileData() {
      return {
        'prefixNo': this.prefixNo
      }
    }
  }
}
</script>
<style scoped>

</style>